<template>
    <div class="wrap">
        <t-list @load-more="fetchData" @scroll="onScroll" :style="{height: height}">
            <template #footer>
                <div class="loading-box">
                    <div v-if="props.noMore">没有更多了</div>
                    <t-loading v-else theme="dots" size="40px" class="loading"/>
                </div>
            </template>
            <div>
                <slot :list="props.data">
                    <div class="assets">
                        <div v-for="(item,index) in props.data" :key="index"  class="asset cursor-pointer" style="width: 21%;" @click="add(item.url)">
                            <img :src="item.url" :alt="item.name">
                        </div>
                    </div>
                </slot>
            </div>
        </t-list>
    </div>
</template>

<script lang="ts" setup>
const bottom = ref(false);
const scrollbar = ref(true);
const props = withDefaults(
    defineProps<{
        data: any,
        noMore?: boolean,
        height?: string
    }>(),
    {
        noMore: false,
        height:'300px'
    }
)
const emits = defineEmits(['fetchData','add'])
const fetchData = () => {
    emits('fetchData')
    console.log('reach bottom!');
}
const add = (url) => {
    emits('add',url)
}
const onScroll = (scrollBottom: number) => {
    if (scrollBottom < 1) {
        emits('fetchData')
    }
};
</script>

<style lang="less" scoped>
.loading-box {
  text-align: center;
  .loading{
    display: flex;
    justify-content: center;
  }
}
.assets {
  display:flex;
  flex-wrap:wrap;
  //overflow-y:auto;
  background-color:#fff;
  padding: 10px 10px 0px 10px;
}
.assets::-webkit-scrollbar {
  display:none
}

.asset {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  background-color:#f4f4f4;
  width:var(--09b13ccd);
  height:calc((420px - 21px) * .21);
  margin:0 2% 12px;
  border-radius:3px;
  position:relative
}
.asset img {
  max-height:65%;
  max-width:65%;
}
.asset .loading {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  background-color:#f7f8fa;
  position:absolute;
  width:100%;
  height:100%
}
</style>
